<template>
  <div class="canvalBox" v-if="isCropperVisible">
    <vue-cropper
      ref="cropper"
      :img="currentImage.imageUrl"
    ></vue-cropper>
    <div @click="prevImage" class="prevImage" :disabled="currentIndex === 0">
      <img src="../../assets/image/school/leftsj.png">
    </div>
    <div @click="nextImage" class="nextImage" :disabled="currentIndex === images.length - 1">
      <img src="../../assets/image/school/rightsj.png">
    </div>
    <div class="cardattention">
      请根据网格调整答题卡，以保证<em>每页答题卡</em>的水平位置
    </div>
    <div class="cardattention1">
      试卷页数：{{ currentIndex + 1 }}页（{{ currentIndex + 1 }}/{{ images.length }}）
    </div>
    <div class="routate">
      旋转:
      <el-select v-model="rotate" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.value"
          :value="item.id"
        ></el-option>
      </el-select>
      度数:
      <el-input v-model="rotateDeg" clearable></el-input>
      <el-button type="primary" @click="saveRotate">保存</el-button>
    </div>
  </div>
</template>

<script>
import { post } from '../../request/api.js';
import { VueCropper } from 'vue-cropper';
import 'vue-cropper/next/dist/index.css';

export default {
  props: ['parentData', 'imageUrllist'],
  data() {
    return {
      images: [],
      currentIndex: 0,
      currentImage: '',
      option: {
        img: require('../../assets/image/cardmodle.jpg'),
        info: true,
        outputSize: 1,
        outputType: 'png',
        canScale: true,
        autoCrop: false,
        fixedBox: false,
        fixed: false,
        fixedNumber: [1, 1],
        full: true,
        canMoveBox: true,
        canMove: true,
        original: true,
        centerBox: true,
        infoTrue: true,
        maxImgSize: 4000,
      },
      options: [
        { value: '顺时针', id: 1 },
        { value: '逆时针', id: 2 },
      ],
      rotate: 1,
      rotateDeg: 0,
      isCropperVisible: false,
    };
  },
  watch: {
    imageUrllist: {
      handler(val) {
        this.images = val;
        this.currentImage = val[this.currentIndex];
        setTimeout(() => {
          this.isCropperVisible = true;
        }, 1000);
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.cropper) {
        //console.log('Cropper is ready');
      } else {
        console.error('Cropper is not initialized');
      }
    });
  },
  methods: {
    saveRotate() {
      const rorateobj = {
        id: this.imageUrllist[this.currentIndex].id,
        rotate: this.rotate === 1 ? Number(this.rotateDeg) : Number(-this.rotateDeg),
      };
      post('/template/rotate', rorateobj)
        .then(() => {
          this.$emit('updataimage');
        })
        .catch((error) => {
          console.error(error);
        });
    },
    prevImage() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.currentImage = this.imageUrllist[this.currentIndex];
      }
    },
    nextImage() {
      if (this.currentIndex < this.imageUrllist.length - 1) {
        this.currentIndex++;
        this.currentImage = this.imageUrllist[this.currentIndex];
      }
    },
  },
  components: {
    VueCropper,
  },
};
</script>

<style scoped>
	.canvalBox{
		box-sizing: border-box;
		width:100vw;
		height:calc(100vh - 102px);
		position: relative;
	}
	.canvasbox{
		position: absolute;
	}
	.cropper-container {
		box-sizing: border-box;
	 width:100vw;
	 height:calc(100vh - 102px); /* 或者具体的像素值 */
	  overflow: hidden; /* 防止图片超出容器 */
	}
	.cardattention{
		position:absolute;
		left:50%;
		transform: translateX(-50%);
		top:20px;
		font-size:16px;
		color:#5B6371;
	}
	.cardattention em{
		font-style:normal;
		color:red;
	}
	.cardattention1{
		position:absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:20px;
		font-size:16px;
		color:#5B6371;
	}
	.routate{
		position:absolute;
		left:50px;
		top:0px;
		background:#fff;
		height:60px;
		display: flex;
		align-items: center;
		padding:0 10px;
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
		border-radius:5px;
		font-size:14px;
		color:#557292;
		border-radius: 10px;
		z-index:1111
	}
	.el-select,.el-input{
		width:100px;
	}
	.el-select{
		margin-right:10px;
		margin-left:10px;
	}
	.el-input{
		margin-left:10px;
		margin-right:10px;
	}
	.el-button{
		border-radius:10px;
		height:35px;
		width:55px;
		padding:0 ;
	}
	.routate >>> .el-input__inner{
		border-radius:10px;
		height:35px;
	}
	.prevImage,.nextImage{
		width:54px;
		height:54px;
		position:absolute;
		top:50%;
		transform: translateY(-50%);
		cursor: pointer;
	}
	.prevImage img,.nextImage img{
		width:100%;
		height:auto;
	}
	.prevImage{
		left:100px;
	}
	.nextImage{
		right:100px;
	}
</style>